<template>
  <div id="water">
      <canvas id="canvas"></canvas>
  </div>
</template>

<script>
export default {
  name: "water",
  data() {
    return {}
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getWater() {
      const canvas = document.getElementById("canvas");//获取canvas
      canvas.width = 200;//设置画布宽度
      canvas.height = 200;//设置画布高度
      canvas.style.display = "none";//隐藏画布本身
      const ctx = canvas.getContext("2d");//获取画笔
      ctx.font = "20px";//设置文字大小
      ctx.fillStyle = "rgba(0,0,0,.3)";//设置文字颜色及透明度
      ctx.rotate(-0.4);//设置文字旋转角度
      ctx.fillText("这是水印", canvas.width / 6, canvas.height / 2);//设置显示文字内容
      const img = canvas.toDataURL("image/png");//参数默认为 image/png,可以是其他image/jpeg等，该方法返回值是一个url，是base64组成的图片的源数据、可以直接赋值给图片的src属性
      const style = `background-image:url(${img});`;//定义样式
      water.setAttribute("style", style);//给要添加水印的元素设置样式
    }

  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
    this.getWater()
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style scoped>
#water{
  width: 100%;
  height: 100%;
  position: absolute;
  left:0;
  top:0;
  pointer-events: none;
}
</style>